<template>
  <Dialog :title="dialogTitle" v-model="dialogVisibleForm" width="800">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="180px"
      v-loading="formLoading"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model.trim="formData.name" placeholder="请输入语音文件名称"></el-input>
      </el-form-item>
      <el-form-item label="语音文件" :required="true">
        <div class="call-box">
          <div class="btn">
            <el-upload
              ref="uploadRef"
              class="upload-box"
              v-model:file-list="fileList"
              :auto-upload="false"
              :limit="1"
              accept=".mp3,.wav"
              action="none"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model.trim="formData.remark"
          type="textarea"
          placeholder="请输入语音文件备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisibleForm = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import * as taskApi from '@/api/call/task'
import { Close } from '@element-plus/icons-vue'

const dialogTitle = ref('操作')
const dialogVisibleForm = ref(false)
const { t } = useI18n()

const emit = defineEmits(['success'])

const formLoading = ref(false)
const formRules = reactive({
  name: [
    {
      required: true,
      message: '名单名称不能为空',
      trigger: 'blur'
    }
  ],
  remark: [
    {
      required: true,
      message: '备注不能为空',
      trigger: 'blur'
    }
  ]
})
const formData = reactive({
  name: null,
  remark: ''
})
const fileList = ref([])
const callId = ref(null)
const formType = ref(null)
const open = async (type, id) => {
  dialogVisibleForm.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  fileList.value = []
  formData.name = null
  formData.remark = ''
}
defineExpose({ open })
const formRef = ref(null)
/*提交*/
const submitForm = async () => {
  const valid = await formRef.value.validate()
  if (!valid) return

  const formDataUp = new FormData()
  // 创建
  if (formType.value == 'create') {
    if (fileList.value.length == 0) {
      ElMessage.error('请上传文件')
      return
    }
    formDataUp.append('name', formData.name)
    formDataUp.append('remark', formData.remark)
    formDataUp.append('file', fileList.value[0].raw)
    // 编辑
  } else {
    formDataUp.append('name', formData.name)
    formDataUp.append('id', callId.value)
    formDataUp.append('unique', '1')
    formDataUp.append('verify', '1')
  }
  formLoading.value = true
  try {
    if (formType.value === 'create') {
      await taskApi.createVoiceFile(formDataUp)
      ElMessage.success(t('common.createSuccess'))
    } else {
      // await RecordApi.updateTaskCallee(formDataUp)
      ElMessage.success(t('common.updateSuccess'))
    }
    dialogVisibleForm.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
  background-color: #e7f4fd;
  padding: 20px;
  border: 1px solid #dbedfc;
  border-radius: 4px;
  .title {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .contet {
    font-size: 14px;
    margin: 4px 0;
  }
}
.call-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn {
    width: calc(100% - 160px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .upload-box {
      width: 72px;
      display: flex;
    }
  }
}
::v-deep .el-upload-list {
  margin-left: 10px;
}
::v-deep .el-upload-list__item-file-name {
  width: 100px;
}
</style>
